<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一隅立画</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./css/jingsaicenter.css" />
		<link rel="stylesheet" type="text/css" href="./css/basestyle.css" />
		<script src="js/head.js" type="text/javascript"></script>
		<script src="js/xshead.js" type="text/javascript"></script>
		<script src="js/base.js"></script>
	</head>
	<body style="background-color: #f2f3f5;">

		<div id="content">
			<div class="container contentItem">
				<div class="row">
					<div id="subject" class="warps col-lg-8 col-md-8">
						<div ref="popupjiazai" style="display: none;">
							<div class="nowrace">
								<div class="nowracetitle">
									<p v-show="languagestatus == 1">当前竞赛</p>
									<p v-show="languagestatus == 2">Current competition</p>
								</div>
								<div class="nowracepaix">
									<div class="nowracepaixicon">
									</div>
									<div class="nowracepaixnew nowracepaixitem" @click="upDataFun(1)" :class="{'active' :paixu == 1}">
										<p v-show="languagestatus == 1">最新</p>
										<p v-show="languagestatus == 2">newest</p>
									</div>
									<div class="nowracepaixmoney nowracepaixitem" @click="upDataFun(2)" :class="{'active' :paixu ==2}">
										<p v-show="languagestatus == 1">金额</p>
										<p v-show="languagestatus == 2">money</p>
									</div>
									<div class="nowracepaixdata nowracepaixitem" @click="upDataFun(3)" :class="{'active' :paixu ==3}">
										<p v-show="languagestatus == 1">日期</p>
										<p v-show="languagestatus == 2">date</p>
									</div>
								</div>
							</div>
							<div class="nowracecontent">
								<div class="nowracecontentitem col-lg-6 col-md-6 col-xs-6" v-for="(match,index) in matchlist" :key="index" @click="opendetail(match.id)">
									<div class="nowracecontentitemup">
										<div class="nowracecontentitemupimg">
											<img class="nowracecontentworks" :src="match.image">
										</div>
										<div class="shoucang" @click.stop="changcoll(index,match.id,match.collstatus)">
											<img v-show="match.collstatus == 1" src="./images/yishoucang.png" >
											<img v-show="match.collstatus == 0" src="./images/weishoucnag.png" >
										</div>
									</div>
									<div class="nowracecontentitemdown">
										<div class="shejiitemtitle">
											<p>{{match.title}}</p>
										</div>
										<div class="shejiitemstatue">
											<div class="shejiitemstatuele">
												<p v-show="languagestatus == 1">截止时间:</p>
												<p v-show="languagestatus == 2">deadline:</p>
												<p>{{match.endtime}}</p>
											</div>
											<div class="shejiitemstatueri">
												<div class="shejiitemstatueriimg">
													<img v-show="match.keep == 0" src="./images/jingsai_bg.png">
													<img  v-show="match.keep == 1" src="./images/jingsai_bg_end.png" >
													<div class="shejiitemstatueritxt">
														<p v-show="match.keep == 0&&languagestatus == 1">进行中</p>
														<p v-show="match.keep == 1&&languagestatus == 1">已结束</p>
														<p v-show="match.keep == 0&&languagestatus == 2">Ongoing</p>
														<p v-show="match.keep == 1&&languagestatus == 2">It's over</p>
													</div>
												</div>
											</div>
										</div>
										<div class="shejiitemworker">
											<div class="shejiitemworkerpeo">
												<div class="shejiitemworkerpeoimg">
													<img :src="match.avatar">
												</div>
												<div class="shejiitemworkerpeoname">
													<p>{{match.nickname}}</p>
												</div>
											</div>
											<div class="shejiitemworkermoney">
												<p>¥</p>
												<p>{{match.money}}</p>
											</div>
										</div>
									</div>
								</div>
								<div class="empty" v-show="matchlist.length<1">
									<img src="images/empty.png" >
								</div>
								<div class="clear"></div>
							</div>
							<div >
								<div class="judgepopup" v-show="tanchuang == 1">
									<div class="judgepopupnav">
										<div class="judgepopupwarp">
											<div class="judgepopupwarpup">
												<img src="./images/revoke_logo.png">
											</div>
											<div class="judgepopupwarpdown">
												<div class="judgepopupwarptxt">
													<p v-show="languagestatus == 2">You haven't logged in yet, please log in to collect first!</p>
													<p v-show="languagestatus == 1">您还未登录，请先登录在进行收藏吧!</p>
												</div>
												<div class="judgepopupwarpbtn">
													<div class="judgepopupwarpbtnitem judgepopupwarpbtnactive" @click="closetipopup">
														<p v-show="languagestatus == 1">好的</p>
														<p v-show="languagestatus == 2">OK</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="fenye" v-show="itemlist>1">
								<ul>
									<li class="fenyeitem" @click="getprve(nowpage-1)"><img src="./images/prve_icon.png" ></li>
									<li v-for="item in itemlist" @click="getcur(item)" :class="{showeffect :item ==nowpage?true:false}">{{item}}</li>
									<li @click="getnext(nowpage+1)"><img src="./images/next_icon.png" ></li>
									<div class="clear"></div>
								</ul>
							</div>
						</div>
						
					</div>
					<!-- 左边栏 -->
					<div id="worksider" class="warps col-lg-4 col-md-4">
						<script src="js/worksidebar.js" type="text/javascript"></script>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/pcFooter.js" type="text/javascript"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
		<script type="text/javascript">
			// 
			let subject = new Vue({
				el: '#subject',
				data: {
					paixu:1,
					showicon:false,
					matchlist: [],
					ids:[],
					itemlist:'',
					nowpage:1,
					current:0,
					userid:'',
					token:'',
					tanchuang:0,
					languagestatus:''
				},
				created:function() {
					let that = this
					if (localStorage.getItem('logininfo')) {
						console.log('isdfksjdf sd')
						let obj = JSON.parse(localStorage.getItem('logininfo'));
						console.log(obj)
						that.loginstatus = 1
						that.userid = obj.userid
						that.token = obj.token
					}
					setTimeout(function(){
						that.getmatchlist()
					},200)
					if (sessionStorage.getItem('languagestatus')) {
						let languagestatus = sessionStorage.getItem('languagestatus')
						this.languagestatus = languagestatus
					}
				},
				mounted:function() {
						this.$refs.popupjiazai.style.display = 'block'
				},
				methods:{
					// 时间转换
					add0(m){return m<10?'0'+m:m },
					getLocalTime(nS) {
					   let time = new Date(parseInt(nS)*1000);
					   var y = time.getFullYear();
					   var m = time.getMonth()+1;
					   var d = time.getDate();
					   var h = time.getHours();
					   var mm = time.getMinutes();
					   var s = time.getSeconds();
					   return y+'/'+this.add0(m)+'/'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm);
					},
					//分页
					getcur:function(index){
						// console.log(this.nowpage)
						this.nowpage = index
						this.getmatchlist()
						console.log(this.nowpage)
						console.log(index)
					},
					// 下一页
					getnext:function(page){
						let that = this
						if(page>that.itemlist){
							that.nowpage = that.itemlist
							
						}else{
							that.nowpage = page
						}
						this.getmatchlist()
					},
					// 上一页
					getprve:function(page){
						let that = this
						if(page == 0){
							that.nowpage = 1
							
						}else{
							that.nowpage = page
						}
						this.getmatchlist()
					},
					// 点击最新最日
					upDataFun(type) {
						let that = this;
						that.paixu = type;
						that.getmatchlist()
						console.log(that.nowpage)
					},
					// 收藏
					changcoll:function(i,id,type){
						console.log(type)
						let that = this
						let list = that.matchlist
						if(type == 0){
							type = 1
						}else if(type == 1){
							type = 0
						}
						axios.get('http://127.0.0.1:8080/api/bishe.competition/collection',{
							params:{
								userid:that.userid,
								token:that.token,
								id:id,
								type:type
							}
						})
						.then((res) =>{
							console.log(res)
							if(res.data.code == 1){
								list.forEach((item ,index) =>{
									if(index == i && item.collstatus == 1){
										item.collstatus = 0
									}else if(index == i && item.collstatus == 0){
										item.collstatus = 1
									}
								})
								that.matchlist = list
							}else if(res.data.code == 2){
								that.tanchuang = 1
							}
						})
					},
					
					// 竞赛中心列表
					getmatchlist:function(){
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.competition/index',{
							params:{
								userid:that.userid,
								token:that.token,
								sort:that.paixu,
								page:that.nowpage,
							},
						})
						.then((res) =>{
							that.matchlist = res.data.data.competition
							that.itemlist = res.data.data.pagenum
							that.nowpage = res.data.data.page
							let list = res.data.data.competition
							list.forEach((item,index) =>{
								item.endtime = that.getLocalTime(item.endtime)
							})
							console.log(that.matchlist,"skladjflkjkasjldfkjlksjd")
						}).catch(err=>{
							console.log(err)
						})
					},
					// 跳转页面
					opendetail:function(id){
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.competition/views',{
							params:{
								userid:that.userid,
								token:that.token,
								id:id
							}
						})
						.then((res) =>{
							console.log(res)
							window.location.href = 'jingsaidetail.html?id='+id
						})
					},
					// 关闭提示
					closetipopup:function(){
						this.tanchuang = 0
					}
				}
			})

			
			
		</script>
	</body>
</html>
